<!-- 交作业-->

<template>
	<AppHeader :title="title" :banAnimate="true">
		<template #left>
			<img @click="onClickLeft" src="@/assets/phoneticPractice/返回图标@3x.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="container">
		<div class="container-list" v-for="item in logList" :key="item.id">
			<div class="container-list-top" v-if="moduleName =='单词'">
				<div class="container-list-top-left"
					:class="item.sourceObj&&item.sourceObj.total_score > 80 ? 'autoGreed' : ''">{{
                    item.words }}</div>
				<img src="@/assets/phoneticPractice/声音@3x (1).png" @click="playAudio(item.fullVideo)" />
			</div>
			<div class="container-list-top" v-if="moduleName=='课文'">
				<div class="container-list-top-left" :class="item.sourceObj.total_score > 80 ? 'autoGreed' : ''">{{
                    item.name.replace("{", "").replace("}", "") }}</div>
			</div>
			<div class="container-list-bottom">
				<div class="container-list-bottom-left" v-if="moduleName == '单词'">
					<span>[{{ item.symbol }}]</span>
					<span>{{ item.pretations }}</span>
				</div>
				<div class="container-list-bottom-left" v-if="moduleName=='课文'">
					<img src="@/assets/phoneticPractice/声音@3x (1).png" @click="playAudio(item.fullVideo)"
						width="18px" />
				</div>
				<div
					:class="item.sourceObj.total_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">
					{{ Math.round(item.sourceObj.total_score)
                    }}
				</div>

			</div>
		</div>
	</div>
	<audio ref="audioElement" :src="audioSrc"></audio>
	<div class="container-submitTask" @click="submitTask">交作业</div>
</template>

<script setup>
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import AppHeader from '@/components/AppHeader.vue'
	import {
		saveExercise
	} from "@/api/followReading";
	import {
		onMounted,
		reactive,
		nextTick,
		toRefs,
		ref
	} from 'vue'
	const route = useRoute()
	const router = useRouter()
	const title = route.query.title
	const moduleName = route.query.moduleName
	const state = reactive({
		logList: [],
		answer_score_json: []
	});
	onMounted(async () => {
		let followReadingList = localStorage.getItem('followReadingList')
		state.logList = JSON.parse(followReadingList)
		state.logList.forEach(item => {
			let color = item.sourceObj.total_score < 60 ? 'red' : item.sourceObj.total_score < 80 ?
				'yellow' : 'green'
			state.answer_score_json.push({
				score: Math.round(item.sourceObj.total_score),
				color: color,
				select: "",
				write: "",
				questionid: {
					version: moduleName == '课文' ? item.versionId : item.wId
				},
				url: item.video,
				fullurl: item.fullVideo,
			})
		})
	})

	const audioSrc = ref('') //音频资源文件
	const audioElement = ref(null) //音频dom
	const playAudio = (audioUrl) => {
		// const audioUrl = URL.createObjectURL(blob);
		audioSrc.value = audioUrl
		nextTick(async () => {
			audioElement.value.play()
		})
	}

	const onClickLeft = () => {
		router.go(-1)
	}
	const submitTask = () => {
		let total_score_sum = 0
		state.answer_score_json.forEach(item => {
			total_score_sum += item.score
		})
		let total_score = Math.round(total_score_sum / state.answer_score_json.length)
		let question_source_type_list = [{
			name: 'repeat',
			type: 3
		}, {
			name: 'new_concept',
			type: 7
		}, {
			name: 'model',
			type: 6
		}]
		let question_source_type = question_source_type_list.find(item => {
			return item.name = route.query.module
		}).type
		// 0教材同步1听说2听力3跟读4笔试5音标6典范7新概念8黑布林
		saveExercise({
			source_id: route.query.versionId,
			question_type: moduleName == '单词' ? 4 : 2,
			question_source_type: question_source_type,
			use_time: route.query.use_time,
			answer_score_json: JSON.stringify(state.answer_score_json),
			mission_id: route.query.mission_id,
			total_score: total_score,
			json: JSON.stringify(state.logList)
		}).then((res) => {
			if (res.code == 1) {
				localStorage.setItem('followReadingInfo', JSON.stringify(res.data))
				router.push({
					path: '/homework/completeFollow',
					query: {
						title: title,
						mission_id: route.query.mission_id,
						module: route.query.module,
						moduleName: route.query.moduleName
					}
				})
			}
		})
	}

	const {
		logList
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.container {
		margin-top: 44px;
		padding-bottom: 65px;
		width: 100%;
		height: 100%;
		overflow: scroll;
		background: #F6F6F6;
		display: flex;
		flex-direction: column;
		align-items: center;

		.container-list {
			margin-top: 10px;
			background: #FFFFFF;
			width: 355px;
			height: max-content;
			display: flex;
			flex-direction: column;
			border-radius: 5px;
			color: #8E8E8E;
			font-size: 14px;

			.container-list-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10px;
				font-size: 16px;
				color: #333333;

				img {
					width: 18px;
					height: 14px;
				}
			}

			.container-list-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 10px 10px 10px;

				div:nth-child(2) {
					color: #FA192C;
				}

				.container-list-bottom-left {
					span:nth-child(2) {
						margin-left: 10px;
					}
				}

			}
		}



	}

	.container-submitTask {
		width: 355px;
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		color: #ffffff;
		background: linear-gradient(to left, #29F19C, #02A1F9);
		position: fixed;
		left: 10px;
		bottom: 10px;
		text-align: center;
		border-radius: 22.5px;
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>